<template>
	<view class="box">
		<view class="people">
			<view class="btn-item flex_r_between yellow" @click="choosePeople">
				<view class="left">主播</view>
				<view class="right flex_center">
					<image :src="select_people.to_avatar" mode="aspectFill" v-if="select_people.type == 1"></image>
					<view class="no" v-else>
						请选择
					</view>
					<u-icon name="arrow-down-fill" color="#FFFFFF" size="20rpx"></u-icon>
				</view>
				
			</view>
		
			<view class="btn-item flex_r_between green" @click="chooseFriends">
				<view class="left">好友</view>
				<view class="right flex_center">
					<image :src="select_people.to_avatar" mode="aspectFill" v-if="select_people.type == 2"></image>
					<view class="no" v-else>请选择</view>
					<u-icon name="arrow-down-fill" color="#FFFFFF" size="20rpx"></u-icon>
				</view>
				
			</view>
			
		</view>
		
		<!-- 选择主播 -->
		<view @touchmove.stop.prevent="preventHandler">
			<uni-popup ref="people" type="center" border-radius="10px">
				<view class="choose-people">
					<scroll-view scroll-y="true">
						<view class="item flex_center" v-for="(item,index) in people_list" :key="index" @click="onSelectPeople(item)">
							<view class="people-item flex_center">
								<view class="avatar flex_r_around">
									<image class="avatar-image" :src="item.avatar" mode="aspectFill"></image>
									<image v-if="item.level_info.frame.image" class="avatar-border-image" :src="item.level_info.frame.image" mode="aspectFill"></image>
								</view>
								<view class="left">
									<view class="top flex_center">
										<text class="hidden">{{ item.nickname }}</text>
										<view v-if="item.level_info.little_bgm" :style="`background: url(${item.level_info.little_bgm}) 0 0 no-repeat;`">Lv.10</view>
									</view>
									
									<view class="bottom flex_center">
										<text class="hidden">{{ item.location }}</text>
										<image :src="$util.prefix(`public/sex_${item.gender}_no_bg.png`)" mode="aspectFill"></image>
										<i>{{ item.age }}</i>
									</view>
								</view>
							</view>
							
							<view class="select-image">
								<image :src="`/static/public/select${item.to_uid == select_people.to_uid ? '_s' : ''}.png`" mode="aspectFill"></image>
							</view>
						</view>
					</scroll-view>
				</view>
			</uni-popup>
		</view>
		
		<!-- 选择用户 -->
		<view @touchmove.stop.prevent="preventHandler">
			<uni-popup ref="friends" type="center" border-radius="10px">
				<view class="choose-friends flex_c">
					<view class="firends-input">
						<input type="text" placeholder="搜索好友昵称/ID" placeholder-class="input-placeholder" v-model="key"
							confirm-type="search" @confirm="onSubmitKey" />
					</view>
					
					<view class="flex1">
						<scroll-view scroll-y="true" @scrolltolower="onReach">
							<view class="friends-list">
								<view class="item flex_center" v-for="(item,index) in list" :key="index" @click="onSelectFriends(item)">
									<view class="firends-content flex_center">
										<view class="avatar">
											<image :src="item.avatar" mode="aspectFill"></image>
										</view>
										
										<view class="right">
											<view class="top hidden">{{ item.nickname || '未知用户' }}</view>
											<view class="bottom flex_center">
												<text class="hidden">{{ item.location }}</text>
												<image :src="$util.prefix(`public/sex_${item.gender}_no_bg.png`)" mode="aspectFill"></image>
												<i>{{ item.age }}</i>
											</view>
										</view>
									</view>
									<view class="select-image">
										<image :src="`/static/public/select${select_people.to_uid == item.follow_uid ? '_s' : ''}.png`" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</uni-popup>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		props: {
			to_uids: {
				type: String,
				default: '0',
			}
		},
		data() {
			return {
				list: [],
				page: 1,
				total: 1,
				key: '',
				
				people_list: '',
				
				select_people: {
					type: 0,
					to_uid: 0,
					to_nickname: '',
					to_avatar: '',
				},
			}
		},
		methods: {
			preventHandler(){
				return;
			},
			
			onReach(){
				if(this.total > this.list.length){
					this.page++;
					this.getFriendList();
				}
			},
			
			getFriendList() {
				this.$get('/active.animalPrize/getFriendList', {
					page: this.page,
					keys: this.key
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				});
			},
			
			onSubmitKey(){
				this.list = [];
				this.page = 1;
				this.total = 1;
				this.getFriendList();
			},
			
			getPeopleList(){
				this.$get('/active.animalPrize/getMicUserList',{
					to_uids: this.to_uids
				}).then(res=>{
					this.people_list = res.data;
				});
			},
			
			chooseFriends(){
				this.list = [];
				this.page = 1;
				this.total = 1;
				this.getFriendList();
				this.$refs.friends.open();
			},
			
			choosePeople(){
				this.getPeopleList();
				this.$refs.people.open();
			},
			
			onSelectFriends(item){
				this.select_people.to_uid = item.follow_uid;
				this.select_people.to_nickname = item.nickname;
				this.select_people.to_avatar = item.avatar;
				this.select_people.type = 2;
				this.$emit('getPeopleSelect', this.select_people.to_uid);
				this.$refs.friends.close();
			},
			
			onSelectPeople(item){
				this.select_people.to_uid = item.to_uid;
				this.select_people.to_nickname = item.nickname;
				this.select_people.to_avatar = item.avatar;
				this.select_people.type = 1;
				this.$emit('getPeopleSelect', this.select_people.to_uid);
				this.$refs.people.close();
			},

		},

		created() {
			
		},
	}
</script>

<style lang="less" scoped>
	.people {
		position: absolute;
		top: 318rpx;
		left: 20rpx;

		.btn-item {
			width: 200rpx;
			height: 64rpx;
			border-radius: 16rpx;
			padding: 0 20rpx;
			margin-bottom: 12rpx;

			.left {
				font-family: 'gongfu';
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 36rpx;
			}

			.right {
				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 20rpx;
					margin-right: 8rpx;
				}
			}
		
			.no {
				font-family: 'gongfu';
				font-size: 24rpx;
				color: #FFF;
			}
		
		}

		.yellow {
			background: #FF9D2C;
		}

		.green {
			background: #4C9300;
		}
	}

	.choose-people {
		width: 90vw;
		height: 80vh;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
		z-index: 99;
		
		.item {
			overflow: hidden;
			padding: 12rpx 32rpx;
			.people-item {
				flex: 1;
				overflow: hidden;
				.avatar {
					width: 128rpx;
					height: 128rpx;
					position: relative;
					margin-right: 8rpx;
					
					.avatar-border-image {
						position: absolute;
						z-index: 2;
						width: 128rpx;
						height: 128rpx;
						top: 0;
						left: 0;
					}
					
					.avatar-image {
						width: 96rpx;
						height: 96rpx;
						border-radius: 48rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50% , -50%);
						z-index: 1;
					}
				}
		
				.left {
					flex: 1;
					overflow: hidden;
					.top {
						overflow: hidden;
						text {
							font-weight: 500;
							font-size: 32rpx;
							color: #131313;
							max-width: 200rpx;
						}
						
						view {
							padding-right: 12rpx;
							width: 114rpx;
							height: 36rpx;
							text-align: right;
							font-weight: 500;
							font-size: 24rpx;
							line-height: 36rpx;
							color: #FFF;
							background-size: 100% !important;
							margin-left: 12rpx;
						}
					}
					
					.bottom {
						overflow: hidden;
						margin-top: 16rpx;
						text {
							font-weight: 500;
							font-size: 24rpx;
							color: #131313;
							max-width: 200rpx;
						}
						
						image {
							width: 24rpx;
							height: 24rpx;
							margin: 0 4rpx 0 12rpx;
						}
						
						i {
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							font-style: normal;
						}
					}
				}
		
			}
			
			.select-image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 16rpx;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	
	.choose-friends {
		width: 90vw;
		height: 80vh;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
		padding: 32rpx 0;
		position: relative;
		z-index: 99;
		
		.firends-input {
			height: 80rpx;
			background: #F1F1F1;
			border-radius: 16rpx;
			margin: 0 32rpx 16rpx 32rpx;
			padding: 0 32rpx;
			width: calc(90vw - 32rpx);
			flex-shrink: 0;
			
			input {
				width: 100%;
				height: 100%;
				text-align: center;
				font-size: 28rpx;
				color: #333;
			}
		}
		
		.flex1 {
			flex: 1;
			overflow: hidden;
			scroll-view {
				height: 100%;
			}
		}
		
		
		.friends-list {
			width: 90vw;
			overflow: hidden;
			
			.item {
				overflow: hidden;
				padding: 16rpx 40rpx;
				.select-image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 16rpx;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
				
				.firends-content {
					flex: 1;
					overflow: hidden;
					.avatar {
						width: 92rpx;
						height: 92rpx;
						border-radius: 46rpx;
						overflow: hidden;
						margin-right: 20rpx;
						background: #E6E6E6;
						image {
							width: 92rpx;
							height: 92rpx;
						}
					}
					
					.right {
						flex: 1;
						overflow: hidden;
						.top {
							font-weight: 500;
							font-size: 32rpx;
							color: #131313;
						}
						
						.bottom {
							overflow: hidden;
							margin-top: 6rpx;
							text {
								font-weight: 500;
								font-size: 24rpx;
								color: #131313;
								max-width: 200rpx;
							}
							
							image {
								width: 24rpx;
								height: 24rpx;
								margin: 0 4rpx 0 12rpx;
							}
							
							i {
								font-weight: 500;
								font-size: 24rpx;
								color: #666;
								font-style: normal;
							}
						}
					}
				}
				
			}
		}
	}

</style>